<template>
  <!--欢迎（零时）-->
  <div>
  <div class="body">
    <!--头部导航-->
    <div class="body_1">
      <div class="div_img">
       <!-- <img src="https://www.dragonjun.com/dragon.gif" alt="飞龙在天">-->
        <img src="https://dragonjun-1255818034.cos.ap-beijing.myqcloud.com/dragonjun/img/header_1.jpg" alt="飞龙在天">
      </div>
      <div class="search_item">
        <!--<i style="font-size: 28px; float: left;margin-left: 25px;margin-top: 7px;color: #666666" class="el-icon-search"></i>-->
        <form id="baidu" target="_blank" action="https://www.baidu.com/baidu">
         <!-- <input name=tn type=hidden value=baidu>-->
          <!--<input placeholder="哈弗H2" type="text" name="word">-->
          <el-autocomplete id="input_one"
                  class="inline-input"
                  v-model="result"
                  :fetch-suggestions="querySearch"
                  placeholder="哈弗H2s"
                           name="word"
                  :trigger-on-focus="false"
          ></el-autocomplete>
          <div class="search_div"  @click="search_to()">搜索一下</div>
        </form>
      </div>

      <!--新闻列表-->
      <div class="news_div">
      <ul class="new">
        <li @click="go_to_new(v)" v-for=" v in news_category">
          {{v}}
        </li>
      </ul>

      </div>
    </div>
    <!--左边导航栏-->
    <div class="body_2">
      <div class="body_3">
        <div class="body_4">
          <div class="body_left">
            <el-col :span="12">
              <el-menu
                default-active="2"
                id="el-menu-vertical-demo"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#F6C5C4"
                text-color="#2F2F2F"
                active-text-color="#F32A25">
                <el-submenu index="1">
                  <template slot="title">
                    <i class="el-icon-document"></i>
                    <span>博客系统(未完毕)</span>
                  </template>
                  <el-menu-item-group>
                    <!--<template slot="title">分组一</template>-->
                    <el-menu-item index="1-1"@click="to_blog()">查看博客</el-menu-item>
                    <el-menu-item index="1-2">我的博客</el-menu-item>
                    <el-menu-item @click="to_setblog()" index="1-3">发表博客</el-menu-item>
                  </el-menu-item-group>
                  <!-- <el-menu-item-group title="分组2">
                     <el-menu-item index="1-3">选项3</el-menu-item>
                   </el-menu-item-group>
                   <el-submenu index="1-4">
                     <template slot="title">选项4</template>
                     <el-menu-item index="1-4-1">选项1</el-menu-item>
                  </el-submenu>-->
                </el-submenu>
                <!--<el-menu-item index="2">
                  <i class="el-icon-menu"></i>
                  <span slot="title">车辆搜索</span>
                </el-menu-item>-->
               <!-- <el-submenu index="2">
                  <template slot="title">
                    <i class="el-icon-search"></i>
                    <span>查询</span>
                  </template>
                  <el-menu-item-group>
                  &lt;!&ndash;  <template slot="title">分组一</template>&ndash;&gt;
                    <el-menu-item index="2-1">选项1</el-menu-item>
                    <el-menu-item index="2-2">选项2</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>-->
                <el-submenu index="2">
                  <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>暂不开发</span>
                  </template>
                  <el-menu-item-group>
                    <!--<template slot="title">分组一</template>-->
                    <el-menu-item index="2-1">选项1</el-menu-item>
                    <el-menu-item index="2-2">选项2</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-menu-item @click="to_train()" index="3">
                  <i class="el-icon-search"></i>
                  <span  slot="title">培训公司鉴定</span>
                </el-menu-item>
              </el-menu>
            </el-col>

           <!-- &lt;!&ndash;车辆搜索&ndash;&gt;
            <el-dialog width="1000px"  title="车辆搜索"  :visible.sync="dialogCarVisible">
              <div class="search_item">
                <i style="font-size: 28px; float: left;margin-left: 25px;margin-top: 7px" class="el-icon-search"></i>
                <input placeholder="例如哈弗H2、宝马520" type="text">
                <div class="search_div">搜索</div>
              </div>
            </el-dialog>-->
        </div>
      </div>
        <!--幻灯片-->
        <div class="body_right">
          <template id="slide">
            <el-carousel  id="slide_1"  height="410px"  :interval="5000" arrow="hover">
              <el-carousel-item v-for="v in imgs" >
                <!--<h3>{{ item }}</h3>-->
                <img :src="v.url" :alt="v.title">
              </el-carousel-item>
            </el-carousel>
          </template>
        </div>
    </div>
  </div>
    <!--汽车品牌信息-->
    <div class="car">
      <!--头标-->
      <div class="d1_body">车辆信息大全</div> <div @click="exchange()" class="d2">换一批</div>
      <!--车标志信息-->
      <div v-loading="loading"
           element-loading-text="拼命加载中"
           class="brand_detail">
        <!--详情-->
        <div v-for="(v,k) in carbrand" v-if="k>=min && k<=max" @click="getCarBrand(v.id)"  class="detail">
          <img :src="v.logo" alt="">
          <span>{{v.name}}</span>
        </div>

      </div>
    </div>
    <!--热映的电影-->
    <div class="movie">
      <!--头标-->
      <div class="d1_body">热门电影推荐</div> <div @click="exchangeMovie()" class="d2">换一批</div>
      <!--详情-->
      <div
        v-loading="loading_movie"
        element-loading-text="拼命加载中"
        class="movie_detail">
        <div @click="movieDetail(v.id)" v-for="(v,k) in movie"  v-if="k<=movie_max && k>=movie_min" class="movie_detail_1">
          <img  :src="v.img" alt="图片暂无">
          <div>{{v.tCn}}</div>
          <div>{{v.movieType}}</div>
        </div>

      </div>
    </div>

  </div>

  </div>

</template>


<script>
  import axios from 'axios';
  export default {
    data() {
      return {
          dialogCarVisible:false,
        imgs:[
            //本地
         /* {url:'https://www.dragonjun.com/1.jpg',title:'图片1'},
          {url:'https://www.dragonjun.com/2.jpg',title:'图片2'},
          {url:'https://www.dragonjun.com/3.jpg',title:'图片3'},
          {url:'https://www.dragonjun.com/4.jpg',title:'图片4'},*/
          //cos
            {url:'https://dragonjun-1255818034.cos.ap-beijing.myqcloud.com/dragonjun/img/1.jpg',title:'图片1'},
            {url:'https://dragonjun-1255818034.cos.ap-beijing.myqcloud.com/dragonjun/img/2.jpg',title:'图片2'},
            {url:'https://dragonjun-1255818034.cos.ap-beijing.myqcloud.com/dragonjun/img/3.jpg',title:'图片3'},
            {url:'https://dragonjun-1255818034.cos.ap-beijing.myqcloud.com/dragonjun/img/4.jpg',title:'图片4'},
        ],
        //汽车
          restaurants: [],
        carbrand:[],
        min:0,
        max:26,
        loading:true,
        loading_movie:true,
        //上映电影
        movie:[],
        movie_min:0,
        movie_max:4,
        movie_total:0,
          /*搜索结果*/
          result:null,
          offer:null,
          /*新闻分类*/
          news_category:null,


      };
    },
      /*监听*/
      watch:{
          result:function (newV,oldV) {
              let url='https://www.dragonjun.com/boot/query/get_baidu_result';
              let data=JSON.stringify({"param":newV});
              axios.post(url,data,{
                  headers: {
                      'Content-Type': 'application/json',
                  }
              }).then((data)=>{
                 // console.log(data);
                  this.offer=data.data.data;
              }).catch((error)=>{
                  console.log(error);
              })
          }

      },
    created(){
          /*获取新闻列表*/
        let url='https://www.dragonjun.com/boot/query/get_new_category';
        //let url='http://localhost:8080/query/get_new_category';
        axios.post(url,null,{
            headers: {
                'Content-Type': 'application/json',
            }
        }).then((data)=>{
            console.log("原始数据",data);
            this.news_category=data.data.data.result;
            //console.log(this.news_category)
        }).catch((error)=>{
            console.log(error);
        });

      // 1.获取正在热映的电影 2.马上上映的电影 3.电影详情 4.电影的演员 5.电影的评论 6.电影剧照
      //电影数据(正在上映)
        url='https://www.dragonjun.com/jersey/api/query/get_movie';
       let data=JSON.stringify({"type":1,"movieId":236404});
      axios.post(url,data,{
        headers: {
          'Content-Type': 'application/json',
        }
      }).then((data)=>{
        //console.log(data);
        this.movie=data.data.data.ms;
        this.movie_total=this.movie.length;
        //console.log(this.movie);
        this.loading_movie=false;
      }).catch((error)=>{
        console.log(error);
      });
      //初始化车辆信息
       url='https://www.dragonjun.com/jersey/api/query/get_car';
       data=JSON.stringify({"type":"1","parentid":"220","carid":"2571"});
      axios.post(url,data,{
        headers: {
          'Content-Type': 'application/json',
        }
      }).then((data)=>{
        //console.log(data);
        this.carbrand=data.data.data.result;
        this.loading=false;
        //console.log(this.carbrand)
      }).catch((error)=>{
        console.log(error);
      });

    },
      mounted() {
          //this.restaurants = this.loadAll();
      },


    methods: {
        to_blog(){
            this.$router.push('/blog');
        },
          /*查询查询*/
        to_train(){
          this.$router.push('/train');
        },
          /*新闻跳转*/
        go_to_new(category){
            this.$router.push('/newsDetail/'+category);
        },
        /*返回结果*/
        querySearch(queryString, cb) {
            var restaurants = this.offer;
            cb(restaurants);
        },
        /*搜索*/
        search_to(){
            var from=document.getElementById("baidu");
            from.submit();
        },
      /*提示*/
      msg(msg){
        this.$message({
          message: msg,
          type: 'warning'
        });
      },
      movieDetail(id){
        //判断用户是否登录
        let user=JSON.parse(sessionStorage.getItem('login_user'));
        if(user==null){
          this.msg('对不起！请登录查看！');
        }else {
          this.$router.push('/movieDetail/'+id);
        }
      },
        /*跳转博客*/
        to_setblog(){
            //判断用户是否登录
            let user=JSON.parse(sessionStorage.getItem('login_user'));
            if(user==null){
                this.msg('对不起！请登录发表！');
            }else {
                this.$router.push('/setBlog');
            }
        },
      /*更换电影*/
      exchangeMovie(){
        this.movie_min=this.movie_min+5;
        this.movie_max=this.movie_max+5;
        if(this.movie_max>=this.movie_total){
          this.movie_min=0;
          this.movie_max=4;
        }
      },
      /*更换车标志*/
      exchange(){
        this.min=this.min+26;
        this.max=this.max+26;
        if(this.max>=249){
          //重置
          this.min=0;
          this.max=26;

        }
      },
      /*获取品牌车型*/
      getCarBrand(id){
        //判断用户是否登录
        let user=JSON.parse(sessionStorage.getItem('login_user'));
        if(user==null){
          this.msg('对不起！请登录查看！');
        }else{
          this.$router.push('/car/'+id);
        }

      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },

    }
  }

</script>

<style scoped >
.body{
  //border: 1px solid black;
  height: auto;
  width: 100%;
  margin: 20px auto;
  overflow: hidden;
}
#el-menu-vertical-demo {
  width: 210px;
  min-height: 410px;
}
  .body_left{
    width: 210px;
    height: 500px;
    //border: 1px solid red;
    //float: left;
    //margin-left: 4%;
    position: absolute;
    left: 50px;
    z-index: 2;
  }
  .body_right{
    width: 100%;
    //border: 1px solid red;
    height: auto;
    float: left;
    //box-shadow: 0 0 5px #666;
    position: absolute;
  }
  .body_right img{
    width: 100%;
    height: 420px;

  }
  .body_right img:hover{
    cursor: pointer;

  }
  #slide{
    height: 500px;
  }
  #slide_1{
    z-index: -2;
  }
  /*汽车的品牌标志*/
  .car{
    border-top: 1px solid #E5E5E5;
    width: 1300px;
    height: auto;
    margin: 30px auto;
    //float: left;
  }
  .d1_body{
    font-size: 18px;
    width: 180px;
    height: 25px;
    text-align: center;
    background: cornflowerblue;
    margin-top: 20px;
    color: black;
    border-radius: 2px;
    display: inline-block;
    margin-left: 50px;
  }
  .d2{
    display: inline-block;
    color: cornflowerblue;
    float: right;
    margin-top: 20px;
    margin-right: 100px;
  }
  .d2:hover{
    cursor:pointer;
  }
  .brand_detail{
    width: 1200px;
    height: auto;
    margin-top: 10px;
    margin-left: 45px;
  }
  .detail{
    width: 130px;
    height: 100px;
    //border: 1px solid red;
    display: inline-block;
    text-align: center;
    margin-right: 3px;
    box-sizing: border-box;
    //box-shadow: 0 0 5px #888888;
    transition: all 1s;
  }
  .detail img{
    width: 50px;
    height: 50px;
    display: block;
    margin: 3px auto;
  }
  .detail:hover{
    color: red;
    cursor:pointer;
    //border: 0.5px solid rebeccapurple;
    background: #F8F8F8;
    box-shadow: 0 0 10px #888888;
    transform: scale(1.1,1.1);
  }
  /*上映电影布局*/
  .movie{
    //border: 1px solid red;
    border-top: 1px solid #E5E5E5;
    width: 1300px;
    height: auto;
    margin: 30px auto;
    //float: left;
    //box-shadow: 0 0 10px #888888;
  }
  .movie_detail{
    width: 1200px;
    height:400px;
    margin-top: 10px;
    margin-left: 45px;
    //border: 1px solid red;
    overflow: hidden;
  }
  .movie_detail_1{
    width: 220px;
    height: auto;
    border: 1px solid #EFF0F0;
    text-align: center;
    line-height: 30px;
    float: left;
    margin-right: 15px;
    box-sizing: border-box;
    margin-top: 10px;
    transition: all 1s;
    margin-bottom: 20px;
    margin-left: 5px;
    box-shadow: 0 0 10px #888888;
    border-radius: 5px;
  }
  .movie_detail_1 img{
    width: 200px;
    height: 280px;
    margin-top: 10px;
  }
  .movie_detail_1:hover{
    cursor:pointer;
    //border: 1px solid #E5E5E5;
    border-radius: 5px;
    transform: translate(0px,-10px);
    box-shadow:0 10px 20px #666;
    color: red;
  }
  /*搜索框*/
  .search_item{
    //border: 3px solid red;
    height: 45px;
    border-radius: 25px 25px 25px 25px;
    width: 870px;
    float: left;
    margin-top: 25px;
    margin-left: 20px;
  }
  .search_div{
    float: left;
    text-align: center;
    background: #3385FF;
    color: white;
    height: 40px;
    width: 100px;
    line-height: 40px;
    font-size: 15px;
    //border-radius: 0 25px 25px 0;
    margin-top: 3px;
    margin-left: 10px;
    border-radius: 5px;
  }
 .search_div:hover{
   cursor: pointer;
 }
 /*.search_item input{
   margin-left: 8px;
   height: 30px;
   margin-top: 6px;
   width: 735px;
   border: none;
   outline: none;
   font-size: 18px;
 }*/
   #input_one{
     float: left;
   margin-left: 8px;
   height: 40px;
   margin-top: 3px;
   width: 735px;
   font-size: 18px;
 }
  .body_1{
    width: 1140px;
    height: 140px;
    margin: 0 auto;
    //margin-left: 52px;
    //margin-bottom: 20px;
    overflow: hidden;
    margin-top:3%;
  }
  .body_1 img{
    width: 190px;
    height: 90px;
    border-radius: 10px;
    margin-top: 5px;
  }
  .div_img{
    width: 200px;
    height: 100px;
   //border: 1px solid #666666;
    float: left;
    text-align: center;
    box-shadow: 0 0 10px #666666;
    margin-top: 5px;
    margin-left: 5px;
    border-radius: 10px;
    transition: all 5s;
  }
  /*.div_img:hover {
    cursor: pointer;
    //transform: rotateY(360deg);
    transform: scale(1.1,1.1);
  }*/
  .body_2{
    //border: 1px solid red;
    height: auto;
    overflow: hidden;
    width: 100%;
    //background: #B30302;
  }
  .body_3{
    width: auto;
    height: 410px;
    margin: 0 auto;
   // border: 1px solid black;
    overflow: hidden;
  }
  .body_4{
    width: 1300px;
    height: auto;
    //border: 1px solid black;
    margin: 0 auto;
    position: relative;
  }
  /*.news_div{
    float: left;
    border: 1px solid red;
    width: 730px;
    height: 20px;
    margin-left: 28px
  }*/
  .new{
    list-style: none;
    //border: 1px solid red;
    float: left;
    margin-top: 5px;
    margin-left: 30px;
  }
  .new li{
    float: left;
    margin-right: 15px;
    color: #666666;
    padding-bottom: 5px;
  }
  .new li:hover{
    cursor: pointer;
    color: red;
    border-bottom: 2px solid blue;
  }

</style>
